<template>
  <div>
    <input type="text" placeholder="请输入需要查询的用户id" v-model.number="id">
    <!--<router-link :to="`/user/${id}`" class="btn">click</router-link>-->
    <a href="javascript:;" @click="toUserDetail" class="btn">click</a>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: "user",
    data(){
      return {
        id:""
      }
    },
    methods:{
      toUserDetail(){
        //this.$router.push(`/user/${this.id}`)

        //如果使用编程式导航 且使用对象的形式! path和params不能同时出现
        //可以使用命名路由来解决
        this.$router.push({
          //path:`/user`,
          name:"UD",
          params:{
            id:this.id
          }
        })
      }
    }
  }
</script>

<style scoped>
  .btn{
    width: 60px;
    height: 25px;
    text-align: center;
    line-height: 12px;
    background: pink;
    border-radius: 50%;
    margin-left: 5px;
  }
</style>